<template>
  <div class="fileExplorerGroup">
    <el-tabs v-model="activeName" class="tighten-tabs" @tab-click="handleClick">
      <el-tab-pane v-if="storagesConfig.artifact.view" label="文件" name="artifact">
        <file-explorer :ref="storagesConfig.artifact.ref" :id-config="idConfig" />
      </el-tab-pane>
      <el-tab-pane v-if="storagesConfig.data.view" label="数据" name="data">
        <file-explorer :ref="storagesConfig.data.ref" :id-config="idConfig" />
      </el-tab-pane>
      <el-tab-pane v-if="storagesConfig.model.view" label="模型" name="model">
        <file-explorer :ref="storagesConfig.model.ref" :id-config="idConfig" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch, provide } from "vue"
// import FileExplorer from '@/views/Canvas/RunContainer/fileExplorer'
const props = defineProps({
  idConfig: {
    type: Object,
  },
  storages: {
    type: Array,
  }
})
const title = ref('算子数据')
const activeName = ref('')
const storagesConfig = ref({
  artifact: {
    view: false,
    show: false,
    ref: 'fileExplorerArtifact'
  },
  data: {
    view: false,
    show: false,
    ref: 'fileExplorerData'
  },
  model: {
    view: false,
    show: false,
    ref: 'fileExplorerModel'
  }
})
watch(() => props.idConfig, (newData, oldData) => {
  for (const key in storagesConfig.value) {
    storagesConfig.value[key].view = false
    storagesConfig.value[key].show = false
  }
})
 function init(key:any) {
  props.storages.forEach(row => {
        storagesConfig.value[row.key].view = row.state
      })
      nextTick(() => {
        if (key) {
          activeName.value = key
          handleClick()
        }
      })
    }
    function handleClick() {
      if (!storagesConfig.value[activeName.value].show) {
        storagesConfig.value[activeName.value].show = true
        nextTick(() => {
          this.$refs[storagesConfig.value[activeName.value].ref].init(this.activeName)
        })
      }
    }
</script>

<style lang="scss" scoped>
.fileExplorerGroup {
  height: 100%;

  .el-tabs {
    height: 100%;

    ::v-deep.el-tabs__content {
      height: calc(100% - 32px);
      padding: 0;
    }

    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
